<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 个人资料</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/css/blog.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.0/jquery.cookie.js"></script>
    <style>
        .personinfo-btn {
            height: 100px;
            width: 100%;
            font-size: 42px;
            margin-top: 50px;
            background-color: #23b14d;
            margin-left: 60px;
            margin-bottom: 260px;
        }

        input {
            font-size: 38px;
        }

        .zhuce-item {
            font-size: 46px;
            font-family: "Microsoft YaHei UI";
        }

        .zhuce-item-input {
            margin-top: 10px;
            margin-bottom: 30px;
        }

        .foot-login-tip {
            margin-top: 60px;
            font-size: 36px;
        }

        .regtip {
            color: red;
            font-size: 36px;
            padding-bottom: 20px;
        }

        #uimg {
            width: 260px;
            height: 260px;
            border-radius: 130px;
            margin-bottom: 30px;
        }

        .upbtn {
            width: 80%;
            height: 100px;
            font-size: 36px;
        }

        .layui-icon-upload {
            font-size: 36px;
        }

        .touxiangtxt {
            padding-top: 90px;
        }

        #phonecodebtn {
            width: 80%;
            height: 100px;
            font-size: 36px;
        }

        .editpersoninfotip {
            color: red;
            font-size: 36px;
            text-align: center;
        }

    </style>
</head>
<body>

<div class="layui-row search-main log-title">

    <div class="layui-col-xs2" onclick="history.go(-1)">
        <i class="layui-icon layui-icon-left return-btn"></i>
    </div>

    <div class="layui-col-xs4 layui-col-xs-offset2">个人资料</div>

</div>
<div class="layui-row blog-main">
    <form id="personinfoform" action="/person/update" method="post">
        <input name="userid" type="hidden" id="userid" th:value="${userDO.userid}">
        <input name="username" type="hidden" th:value="${userDO.username}">
        <div class="layui-row zhuce-item">
            <div class="layui-col-xs6 touxiangtxt"> 头像：</div>
            <div class="layui-col-xs6">
                <img th:src="${userDO.touxiang}" id="uimg">
                <input name="touxiang" type="hidden" id="touxiang" th:value="${userDO.touxiang}">
            </div>
        </div>
        <div class="layui-row zhuce-item-input">

            <div class="layui-col-xs6 layui-col-xs-offset6">
                <button type="button" class="btn btn-success upbtn" id="test3">
                    <i class="layui-icon layui-icon-upload"></i> 上传图片
                </button>
            </div>


        </div>

        <div class="layui-row zhuce-item" style="margin-bottom: 30px;">
            剩余有效时间：<span style="color: red;" th:text="${userDO.gethourtoday()}"></span>
        </div>


        <div class="layui-row zhuce-item">
            昵称：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="nickname" autocomplete="off" placeholder="请输入昵称" maxlength="10"
                   class="layui-input" th:value="${userDO.nickname}">
        </div>

        <div class="layui-row zhuce-item">
            手机号：<span style="font-size: 24px;color: grey;">(加上地区号，例如中国+8615012345678)</span>
        </div>
        <div class="layui-row zhuce-item-input">

            <input type="text" name="phone" autocomplete="off" placeholder="加上地区号，例如中国+8615012345678"
                   th:value="${userDO.phone}"
                   class="layui-input" maxlength="20">


        </div>

        <div class="layui-row zhuce-item">
            短信验证码：
        </div>

        <div class="layui-row zhuce-item-input">

            <div class="layui-col-xs6">
                <input type="text" name="phonecode" autocomplete="off" placeholder="短信验证码"
                       class="layui-input" maxlength="6">
            </div>
            <div class="layui-col-xs5 layui-col-xs-offset1">
                <input type="button" id="phonecodebtn" class="btn btn-info" value="获取手机验证码">
            </div>


        </div>


        <div class="layui-row editpersoninfotip" th:text="${editpersoninfotip}"></div>

        <div class="layui-row zhuce-item">
            登录密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="loginpass"
                   autocomplete="off" placeholder="不修改请为空" class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            支付密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="paypass" autocomplete="off" placeholder="不修改请为空" class="layui-input">
        </div>
        <div class="layui-row zhuce-item">
            火币apiKey：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="huobiapikey" autocomplete="off" placeholder="输入复制的火币apiKey"
                   th:value="${userDO.huobiapikey}" class="layui-input">
        </div>
        <div class="layui-row zhuce-item">
            火币apiSecret：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="huobiapisecret" autocomplete="off" placeholder="输入复制的火币apiSecret"
                   th:value="${userDO.huobiapisecret}" class="layui-input">
        </div>


        <div class="layui-row">
            <div class="layui-col-xs8 layui-col-xs-offset1">
                <button type="submit" class="layui-btn layui-btn-normal personinfo-btn">提交修改</button>
            </div>

        </div>
    </form>


</div>

</div>

<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            , url: '/common/sysFile/upload' //改成您自己的上传接口
            , accept: 'file' //普通文件
            , done: function (msg) {
                $("#uimg").attr("src", msg.fileName);
                $("#touxiang").val(msg.fileName);

            }
        });
    });


    function getCode(phone, type) {

        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/getCode?phone=" + phone + "&type=" + type,
            //数据，json字符串
            data: {},
            //请求成功
            success: function (result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }


    $(function () {

        /*仿刷新：检测是否存在cookie*/

        if ($.cookie("captcha")) {

            var count = $.cookie("captcha");

            var btn = $('#phonecodebtn');

            btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');

            var resend = setInterval(function () {

                count--;

                if (count > 0) {

                    btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');

                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});

                } else {

                    clearInterval(resend);

                    btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');

                }

            }, 1000);

        }


        /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/

        $("#phonecodebtn").click(function () {

            //发送验证码
            var phone = $("input[name=phone]").val();
            if (phone == '' || phone == null) {
                alert("请输入手机号");
                return false;
            }
            getCode(phone, 'phone');

            var btn = $(this);

            var count = 60;

            var resend = setInterval(function () {

                count--;

                if (count > 0) {

                    btn.val(count + "秒后可重新获取");

                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});

                } else {

                    clearInterval(resend);

                    btn.val("获取手机验证码").removeAttr('disabled style');

                }

            }, 1000);

            btn.attr('disabled', true).css('cursor', 'not-allowed');

        });


    });
</script>
</body>
</html>